@charset "utf-8";
@import url(reset.css);
@import url(base.css);

/**/
body, html{}
#wrapper{
	
	width:100%; min-width:320px; 
	background-color:#f7f8f8; 
	background-image:url(../images/round_btm_left.jpg), url(../images/round_btm_right.jpg);
	background-position:left bottom, right bottom;
	background-repeat:no-repeat, no-repeat;
}

.login{
	background:#d7df21 !important; 
	background-image:url(../images/login_top_left.jpg), url(../images/login_top_right.jpg), url(../images/login_btm_left.jpg), url(../images/login_btm_right.jpg) !important;
	background-position:left top, right top, left bottom, right bottom !important;
	background-repeat:no-repeat, no-repeat, no-repeat, no-repeat !important;
	text-align:center;
}
/*.main{background-color:#f7f8f8; border-radius:8px;}*/

.content{width:90%; max-width:432px; margin:0 auto;}

/*버튼*/
#header .btn_back{overflow:hidden; width:18px; height:0; padding-top:15px; margin:10px 0 0 8px; background:url(../images/btn_back.png) no-repeat; background-size:100% auto; }
#header .btn_back:active{background-position:0 -20px;}

#header .btn_panel{overflow:hidden; width:24px; height:0px; padding-top:19px; margin:9px 0 0 5px; background:url(../images/btn_pnl.png) no-repeat; background-size:100% auto;}
#header .btn_panel:active{background-position:0 -19px;}

.btn_round{display:block; width:50px; height:24px; padding-top:7px; margin-top:5px; background:url(../images/btn_round.png) no-repeat; background-size:100% auto; color:#707070;}
.btn_round:active{background-position:0 -31px;}

.btn_next{display:block; width:40px; height:24px; padding:7px 0 0 10px; margin-top:5px; background:url(../images/btn_round2.png) no-repeat; background-size:100% auto; color:#707070; text-align:left;}
.btn_next:active{background-position:0 -31px;}

/*header*/
#header{width:100%; height:43px; border-bottom:1px solid #acadad; color:#7d7d7d; 
	background-color:#f7f8f8; 
	background-image:url(../images/round_top_left.jpg), url(../images/round_top_right.jpg);
	background-position:left top, right top;
	background-repeat:no-repeat, no-repeat;
	z-index:1000;
}
#header h1{margin:0.5em 20% 0; line-height:1.2; font-size:20px;}
#header .btn_right{margin:4px 0px 0 0;}
#header .btn_right .ui-btn-inner{padding:0;}
#header .btn_right img{width:50px;}
#header .btn_panel .ui-btn-inner{padding:0;}

#header_srch{
	background-color:#f7f8f8; 
	background-image:url(../images/round_top_left.jpg), url(../images/round_top_right.jpg);
	background-position:left top, right top;
	background-repeat:no-repeat, no-repeat;
}
#header_srch h1{margin:0.7em 20% 0.7em; color:#7d7d7d; line-height:1.2; font-size:18px;}

#header_srch .btn_left{overflow:hidden; width:22px; height:0; padding-top:21px; margin:8px 0 0 11px; background:url(../images/btn_key.png) no-repeat; background-size:100% auto;}
#header_srch .btn_left:active{background-position:0 -26px;}

#header_srch .btn_right{overflow:hidden; width:22px; height:0; padding-top:21px; margin:12px 11px 0 0; background:url(../images/btn_add.png) no-repeat; background-size:100% auto;}
#header_srch .btn_right:active{background-position:0 -26px;}

#header_srch .search{
	position:relative;
	width:96%; margin:0 auto; padding:6px 0;
/*	background-color:#87c542;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #87c542), color-stop(1, #5aa545));
	background-image:-moz-linear-gradient(top, #87c542, #5aa545);
	background-image:-o-linear-gradient(top, #87c542, #5aa545);
	border-radius:6px 6px 0 0;*/
}
#header_srch .search .icon_srch{display:block; height:16px; padding:4px 0 3px 10%; background:url(../images/icon_srch.png) no-repeat 10px center; background-size:18px auto;}
#header_srch .search input{width:95%; border:0; background:0; font-size:16px; color:#fff;}
#header_srch .search input::-webkit-input-placeholder{color:#fff;}

/*footer*/
#footer{width:100%; height:50px;
	background-color:#f7f8f8; 
	background-image:url(../images/round_btm_left.jpg), url(../images/round_btm_right.jpg);
	background-position:left bottom, right bottom;
	background-repeat:no-repeat, no-repeat;
	z-index:1000;
}
.nav{width:100%; height:50px;
	background-color:#636363;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #636363), color-stop(1, #464646));
	background-image:-moz-linear-gradient(top, #636363, #464646);
	background-image:-o-linear-gradient(top, #636363, #464646);
	border-radius:0 0 8px 8px;
}
.nav li{float:left; width:33.3%; height:100%; text-align:center;}
.nav li:first-child{overflow:hidden; border-radius:0 0 0 8px;}
.nav li:last-child{overflow:hidden; border-radius:0 0 8px 0;}
.nav a{display:block; width:100%; height:100%; line-height:1.2;}
.nav .active{
	background-color:#87c542;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #474747), color-stop(1, #646464));
	background-image:-moz-linear-gradient(top, #474747, #646464);
	background-image:-o-linear-gradient(top, #474747, #646464);
}
.nav img{width:44px; padding-top:5px;}

/*container*/
#container{width:100%; background:#f7f8f8 url(../images/container_bg_top.png) repeat-x;}

/*field input*/
.field{width:100%; background-color:#fff; border:1px solid #acacac; border-radius:10px;	text-align:left;}
.field li{position:relative; height:21px; padding:8px 4%; border-bottom:1px solid #acacac; font-size:16px; line-height:1.3;}
.field li:last-child{border:0;}
.field .textform{width:100%; background:0; border:0; font-size:16px; line-height:1; border-radius:0; margin:0; padding:0; }
.field input::-webkit-input-placeholder{color:#acacac;}
.field .price{text-align:right;}

/**/
.project_title{display:block; padding:15px 0 5px 2%; font-size:16px; font-weight:normal; color:#939598;}
.textbox{width:94%; padding:8px 3%; background-color:#fff; border:1px solid #acacac; border-radius:10px; font-size:14px; line-height:1.5;}
.textbox img{vertical-align:top; margin-top:4px;}

/*녹색 긴 버튼*/
.btn_green_wide{
	display:block; width:100%; height:27px; padding:13px 0 0; border-radius:5px; margin:10px 0;
	background-color:#87c542;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #87c542), color-stop(1, #5aa545));
	background-image:-moz-linear-gradient(top, #87c542, #5aa545);
	background-image:-o-linear-gradient(top, #87c542, #5aa545);
	-moz-box-shadow: 0px 0px 2px #a0a0a0; -webkit-box-shadow: 0px 0px 2px #a0a0a0; box-shadow: 0px 0px 2px #a0a0a0;
	color:#fff; text-align:center; font-size:16px; font-weight:bold; 
}
.btn_green_wide:active{
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5aa545), color-stop(1, #89c542));
	background-image:-moz-linear-gradient(top, #5aa545, #89c542);
	background-image:-o-linear-gradient(top, #5aa545, #89c542);
}

/*오렌지색 긴 버튼*/
.btn_orange_wide{
	display:block; width:100%; height:27px; padding:13px 0 0; border-radius:5px; margin-top:5%; margin-bottom:10px;
	background-color:#87c542;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f8941d), color-stop(1, #f26522));
	background-image:-moz-linear-gradient(top, #f8941d, #f26522);
	background-image:-o-linear-gradient(top, #f8941d, #f26522);
	-moz-box-shadow: 0px 0px 2px #a0a0a0; -webkit-box-shadow: 0px 0px 2px #a0a0a0; box-shadow: 0px 0px 2px #a0a0a0;
	color:#fff; text-align:center; font-size:16px; font-weight:bold; 
}
.btn_orange_wide:active{
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f26522), color-stop(1, #f8941d));
	background-image:-moz-linear-gradient(top, #f26522, #f8941d);
	background-image:-o-linear-gradient(top, #f26522, #f8941d);
}

/*일반 게시판*/
.board_list li a{
	display:block; width:84%; padding:8px 10% 8px 6%;
	background:url(../images/arrow_list.png) no-repeat 97% center; background-size:10px auto; border-bottom:1px solid #d7d7d7; 
	line-height:1.4; color:#808285;
}
.board_list .title{width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#414042; font-size:14px;}
.odd{background-color:#f0f0f0 !important;}

/*작성완료*/
.top_list{
	display:block; width:86%; padding:10px 10% 10px 4%;
	background:#f0f0f0 url(../images/arrow_list.png) no-repeat 97% center; background-size:10px auto; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;
	line-height:1.4; color:#5aa545; font-size:14px;
}
.top_list img{width:12px; vertical-align:top;}

/*상단 녹색 bar*/
.bar_green{width:92%; padding:8px 4% 4px; background:#89c542 url(../images/ve_bg_top.jpg) repeat-x; color:#fff; font-size:14px; line-height:1.5; vertical-align:middle;}
.bar_green img{width:36px; vertical-align:middle;}
.bar_title{display:block; float:left; width:80%; padding:10px 0;}
.btn_write{float:right; margin-top:8px;}
.btn_write img{width:20px;}
.bar_green.line1{padding:16px 4% 12px;}

/*하단 텍스트*/
.btm{width:100%; padding:10px 0 6px; background-color:#f0f0f0; border-bottom:1px solid #d7d7d7; text-align:center; color:#acacac; line-height:1.5;}
.btm img{width:36px; vertical-align:middle;}
.btn_add{padding:5px;}
.btn_add img{width:20px;}

/**/
#progress{width:96%; margin:0 auto; }
#progress .back_bar{display:block; width:100%; height:10px; border:1px solid #7a7a7a; border-radius:4px; box-shadow:0 0 5px #7a7a7a inset;}
#progress .now{display:block; height:10px; margin:-1px 0 0 -1px; border:1px solid #3d5d0f; border-radius:4px;
	background-color:#b4de71;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b4de71), color-stop(1, #83d43b));
	background-image:-moz-linear-gradient(top, #b4de71, #83d43b);
	background-image:-o-linear-gradient(top, #b4de71, #83d43b);
}
#progress .step1{width:8.33%;}
#progress .step2{width:16.66%;}
#progress .step3{width:24.99%;}
#progress .step4{width:33.32%;}
#progress .step5{width:41.65%;}
#progress .step6{width:49.98%;}
#progress .step7{width:58.31%;}
#progress .step8{width:66.64%;}
#progress .step9{width:74.97%;}
#progress .step10{width:83.3%;}
#progress .step11{width:91.63%;}
#progress .step12{width:100%;}

#progress .name{position:relative; width:100%; font-size:11px; color:#414042;}
#progress .name .hline{display:block; height:6px; margin:4px 0 4px 0px; border-left:1px solid #414042;}
#progress .name .rline{display:block; height:6px; margin:4px 0 4px 0; border-right:1px solid #414042;}
#progress .name1{position:absolute;left:0;}
#progress .name2{position:absolute;left:16.66%;}
#progress .name3{position:absolute;left:41.65%;}
#progress .name4{position:absolute;left:66.64%;}
#progress .name5{position:absolute;right:0;}

/*panel*/
#panel{background:url(../images/pnl_bg.jpg) repeat; z-index:10000; width:280px; height:100%; position:absolute;left:-280px;top:0;}
#panel .ui-panel-inner{padding:0;}
#panel h2{width:96%; padding:8px 0 8px 4%; background:url(../images/pnl_top_bg.jpg) repeat; border-bottom:1px solid #252525; font-size:12px; color:#fff; font-weight:normal;}

#panel .link a{display:block; padding:12px 0 12px 14%; background:url(../images/icon_link.png) no-repeat; background-size:26px auto; border-bottom:1px solid #252525; color:#ccc; font-size:14px;}
#panel .link a:active{
	background-image:url(../images/pnl_press_bg.png), url(../images/icon_link_press.png);
	background-repeat:repeat, no-repeat;
	background-size:26px auto;
}
#panel .link .home{background-position: 6px 7px;}
#panel .link .home:active{background-position:0 0, 6px 7px;}
#panel .link .sms{background-position:6px -28px;}
#panel .link .sms:active{background-position:0 0, 6px -28px;}
#panel .link .email{background-position:6px -67px;}
#panel .link .email:active{background-position:0 0, 6px -67px;}
#panel .link .del{background-position:6px -107px;}
#panel .link .del:active{background-position:0 0, 6px -107px;}
#panel .link .project_out{background-position:9px -147px;}
#panel .link .project_out:active{background-position:0 0, 9px -147px;}

#panel .project_info li{position:relative; padding:8px 4% 8px 4%; border-bottom:1px solid #252525; font-size:14px;}
#panel .project_info span{display:block; line-height:1.3;}
#panel .project_info .title{color:#898989;}
#panel .project_info .cont{color:#ccc;}
#panel .project_info .btn_copy{position:absolute;right:10px;top:12px;}
#panel .project_info .btn_copy img{width:52px;}

/*완료프로젝트 네비*/
#fin_nav{width:94%; margin:12px auto 10px;}
#fin_nav li{float:left; width:33.3%;}
#fin_nav li a{
	overflow:hidden; display:block; padding:10px 0; border:1px solid #acacac; text-align:center; color:#ababab; font-size:14px; line-height:1.2;
	background-color:#fff;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #f1f0f0));
	background-image:-moz-linear-gradient(top, #fff, #f1f0f0);
	background-image:-o-linear-gradient(top, #fff, #f1f0f0);
}
#fin_nav .active{background:#e8e8e8; box-shadow:0 0 8px #c5c5c5 inset; color:#414042;}
#fin_nav li:first-child a{border-right:0;border-radius:6px 0 0 6px;}
#fin_nav li:last-child a{border-left:0; border-radius:0 6px 6px 0;}

/**/
.ui-content{padding:0;}
.no_scroll{width:320px; overflow:hidden;}

.ani_open{
	-webkit-transform:translate3d(280px,0,0); -webkit-transition:-webkit-transform 250ms ease;
}


